<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .box>div{
                display: inline-block;
                /*vertical-align: 垂直对齐方式
                middle：中线对齐
                top：顶端对齐
                bottom：底端对齐
                baseline：基线对齐*/
                vertical-align: middle;
            }

            .a{
                width: 50px;
                height: 100px;
                background: red;
            }
            /*.b{*/
                /*width: 30px;*/
                /*height: 150px;*/
                /*background:blue;*/
            /*}*/
            .box{
                width: 600px;
                height: 500px;
                background: yellow;
            }

            .box:after{
                content: '';
                display: inline-block;
                height: 100%;
                vertical-align: middle;
            }

        </style>
    </head>
    <body>

    <div class="box">
        <div class="a"></div>
        <!--<div class="b"></div>-->


    </div>
    </body>
</html>